<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>家庭管理</el-breadcrumb-item>
        <el-breadcrumb-item>成员详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>成员数：{{members.length}}</div>
      <el-row>
        <el-col :span="12" v-for="member in members" :key="member.id">
          <el-card class="box-card" style="margin-top: 10px;">
            <template #header>
              <div class="card-header">
                <span>{{member.name}}</span>
                <el-button class="button" @click="editMember(member)" type="text">保存修改</el-button>
                <el-popconfirm :title="'确定删除'+member.name+'吗'" @confirm="deleteMember(member.id)">
                  <template #reference>
                    <el-button class="button" type="text">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
            <div style="padding: 10px;">
              <span>性别：</span>
              <el-select v-model="member.gender">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </div>
            <div style="padding: 10px;">
              <span>出生日期：</span>
              <el-date-picker type="date" placeholder="选择日期" v-model="member.birthday"></el-date-picker>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="member.nativePlace">
                <template #prepend>籍贯</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="member.phone">
                <template #prepend>联系电话</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="member.occupation">
                <template #prepend>职业</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="member.employer">
                <template #prepend>工作单位</template>
              </el-input>
            </div>
          </el-card>
        </el-col>

        <!-- 添加新成员 -->
        <el-col :span="12">
          <el-card class="box-card" style="margin-top: 10px;">
            <template #header>
              <div class="card-header">
                <span>添加新成员</span>
                <el-popconfirm :title="'确定添加'+tmember.name+'吗'" @confirm="addMember()">
                  <template #reference>
                    <el-button class="button" type="text">添加</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="tmember.name">
                <template #prepend>姓名</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <span>性别：</span>
              <el-select v-model="tmember.gender">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </div>
            <div style="padding: 10px;">
              <span>出生日期：</span>
              <el-date-picker type="date" placeholder="选择日期" v-model="tmember.birthday"></el-date-picker>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="tmember.nativePlace">
                <template #prepend>籍贯</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="tmember.phone">
                <template #prepend>联系电话</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="tmember.occupation">
                <template #prepend>职业</template>
              </el-input>
            </div>
            <div style="padding: 10px;">
              <el-input placeholder="请输入内容" v-model="tmember.employer">
                <template #prepend>工作单位</template>
              </el-input>
            </div>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    inject: ['reload'],
    data() {
      return {
        familyId: -1,
        members: [],
        tmember: {}
      }
    },
    methods: {
      getMemberList() {
        this.$axios.get("members?family_id=" + this.familyId).then(res => {
          if (res.data.code == 200) {
            this.members = res.data.obj;
          }
        })
      },
      editMember(member) {
        this.$axios.put("member", member).then(res => {
          if (res.data.code == 200) {
            this.$message.success("保存成功")
          }
        })
      },
      deleteMember(id) {
        this.$axios.delete("member/" + id).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功")
            this.reload();
          }
        })
      },
      addMember() {
        this.tmember.familyId = this.familyId;
        this.$axios.post("member", this.tmember).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功")
            this.reload();
          }
        })
      }
    },
    components: {},
    created() {
      this.familyId = this.$route.params.id;
      this.getMemberList();
    }
  }
</script>

<style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 480px;
  }
</style>
